<template>
  <div>
    <el-card :body-style="{ padding: '20px' }" style="margin-bottom: 20px;">
      <h2>{{ merchantList.merchantName }}</h2>
      <p>{{shopDetail.description}}{{ merchantList.merchantName }}</p>
      <img :src="picture" alt="店铺图片" style="width: 100%; height: 200px; object-fit: cover;" />
    </el-card>

    <el-tabs v-model="activeTab">
      <el-tab-pane label="商店介绍" name="info">
        <div>
          <h3>商店详情</h3>
          <p>{{ merchantList.introduce }}</p>
        </div>
      </el-tab-pane>

      <el-tab-pane label="菜品展示" name="dishes">
        <div>
          <h3>推荐菜品</h3>
          <el-list>
            <el-list-item v-for="dish in shopDetail" :key="dish.id">
              <el-card :body-style="{ padding: '10px' }">
                <h4>{{ dish.dishName }}</h4>
                <p>价格：{{ dish.price }} 元</p>
                <img :src="dish.dishPic" alt="菜品图片" style="width: 40%; height: 350px; object-fit: contain;" />
              </el-card>
            </el-list-item>
          </el-list>
        </div>

        <div style="margin-top: 500px;text-align: center;">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="shopDetail.pageSize"
            :total="shopDetail.length"
            layout="total, prev, pager, next, jumper"
            style="margin-top: auto;">
          </el-pagination>
        </div>
      </el-tab-pane>

      <el-tab-pane label="店铺评论" name="comments">
        <div>
          <h3>用户评论</h3>
          <el-list>
            <el-list-item v-for="comment in messageList" :key="comment.id">
              <el-card :body-style="{ padding: '10px' }">
                <h4>{{ comment.userName }}</h4>
                <p>{{ comment.content }}</p>
                <p>评分：{{ comment.rating }} / 5</p>
              </el-card>
            </el-list-item>
          </el-list>

          <h3>添加评论</h3>
          <el-form @submit.native.prevent="addComment">
            <el-form-item label="评论内容">
              <el-input v-model="newComment.content" type="textarea" placeholder="请输入评论内容"></el-input>
            </el-form-item>
            <el-form-item label="评分">
              <el-rate v-model="newComment.rating"></el-rate>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" native-type="submit">提交评论</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {listDish} from "@/api/system/dish";
import {getMerchant, listMerchant} from "@/api/system/merchant";
import {addMessage, listMessage} from "@/api/system/message";
export default {
  data() {
    return {
      activeTab: 'info', // 默认激活的标签
      currentPage: 1,
      newComment: {
        userName: '',
        content: '',
        rating: 0
      },
      id: '',
      params: {
        pageNum: 1,
        pageSize: 10,
        merchantId: ''
      },
      messageList: [],
      picture: '',
      merchantList: {},
      shopDetail: {},
      // 查询参数
      queryMerParams: {
        pageNum: 1,
        pageSize: 20,
        dishName: null,
        dishType: null,
        dishPic: null,
        taste: null,
        price: null,
        merchantNo: null,
        merchantName: null,
        address: null,
        form: null,
        dishIntro: null
      },
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getList();
    //展示评论信息
    this.getComment();
  },
  methods: {
    getList() {
      this.loading = true;
      console.log("获取id=" + this.id);
      getMerchant(this.id).then(response => {
        console.log("12=" + process.env.VUE_APP_BASE_API);
        let blogInfo = response.data;
        this.picture = process.env.VUE_APP_BASE_API + blogInfo.picture;
        console.log("=" + this.picture);
        this.merchantList = response.data;
        console.log("============" + JSON.stringify(this.merchantList));
        this.loading = false;
        this.queryMerParams.merchantName = this.merchantList.contacts;
        console.log("菜品" + JSON.stringify(this.queryMerParams.merchantName));
        listDish(this.queryMerParams).then(response => {

          this.shopDetail = response.rows;
          for (let i = 0; i < this.shopDetail.length; i++) {
            if (this.shopDetail[i].dishPic.length > 0) {
              this.shopDetail[i].dishPic = process.env.VUE_APP_BASE_API + this.shopDetail[i].dishPic
            }
          }
          console.log("菜品" + JSON.stringify(this.shopDetail));
        });
      });

    },
    handleCurrentChange(page) {
      this.currentPage = page;
    },
    getComment() {
      this.loading = true;
      this.params.merchantId = this.id;
      console.log("params=" + JSON.stringify(this.params));
      listMessage(this.params).then(response => {
        this.messageList = response.rows;
        console.log("==========" + messageList);
        this.shopDetail.comments = messageList;
      });
    },
    addComment() {
      this.newComment.merchantId = this.id;
      this.newComment.userName = this.merchantList.merchantName;
      console.log(JSON.stringify(this.newComment));
      //console.log(this.newComment.rating);
      // 校验表单
      if (this.newComment.content && this.newComment.rating) {
        addMessage(this.newComment).then(response => {
          this.$message.success('评论成功');
          window.location.reload();
          // 清空表单
          this.newComment.content = '';
          this.newComment.rating = 0;
        })
      } else {
        this.$message.warning('请填写所有字段');
      }
    }
  }
};
</script>

<style scoped>
</style>
